<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>类别管理</title>
  <link rel="stylesheet" type="text/css" href="../lib/layui-v2.6.3/css/layui.css"/>
  <style>
    body{
      background-color:#eeeeee;
    }
    .layui-table, .layui-table-view {
      margin: 0px 0;
    }

  </style>
</head>
<body>
<div class="layui-card" style="margin-left: 10px; margin-top: 3px; padding-top: 10px; margin-right: 10px; margin-bottom: 0px; ">
  <!-- 头部-->
  <!-- 头部  存放顶部工具栏-->
  <div class="layui-card-header">
    <!-- 顶部工具栏 需要修改name属性为实体类属性-->
    <div class="layui-form-item"  id="topBar">
      <form class="layui-form" onsubmit="return false;">
        <label class="layui-form-label">名称：</label>
		<!-- id对应重载函数的 where条件，元素为两个一对
		 <label class="layui-form-label">名称：</label>
		 <input type="text" id="自定义" name="实体类属性" style="width:150px;" class="layui-input layui-input-inline"/>
		-->
        <input type="text" id="typeName" name="typeName" style="width:150px;" class="layui-input layui-input-inline"/>
        <!--操作按钮 -->
        <label class="layui-form-label" style="width: 20px;"></label>
        <button class="layui-btn layui-btn-sm " id="search"><i class="layui-icon">&#xe615;</i></button>
      </form>
    </div>
  </div>
  <!-- 中部 存放表格，表格头部工具栏，行内工具栏-->
  <div class="layui-card-body" style="margin-top: 0px;padding-top: 0px; height: 528px">
    <!-- 表格工具栏 -->
    <script type="text/html" id="topTool">
      <button type="button" class="layui-btn layui-btn-xs" lay-event="add">
        <i class="layui-icon" >&#xe61f;</i>添加
      </button>
      <button class="layui-btn layui-btn-xs layui-btn-danger"  lay-event="delAll">
        <i class="layui-icon">&#xe640;</i>批量删除
      </button>
    </script>
    <!-- 行内工具栏按需添加按钮 -->
    <script type="text/html" id="barDemo">
      <button class="layui-btn layui-btn-xs layui-bg-orange" lay-event="edit" id="upbtn"><i class="layui-icon">&#xe642;</i></button>
      <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete" id="dlbtn"><i class="layui-icon">&#xe640;</i></button>
    </script>
    <!-- 数据表格 不需要任何修改-->
    <table  class="layui-table" style="margin-top: 0px;" id="tableDemo" lay-filter="table"></table>
  </div>
  <!--新增区域默认隐藏。对应标号5的行内监听打开，被标号6的方法监听，需要将name值修改为和实体类属性一模一样
	  <div class="layui-form-item">
		<label class="layui-form-label">自定义名：</label>
		<div class="layui-input-block">
		  <input type="text" name="实体类属性" lay-verify="required" class="layui-input"style="width:200px;"/>
													设置为必填字段                              宽度
		</div>
	  </div>
  -->
  <div class="layui-form-item" id="addPage" style="display:none;">
    <form class="layui-form" onsubmit="return false;" lay-filter="add"  id="addNew">
      <div class="layui-form-item">
        <label class="layui-form-label">类别名：</label>
        <div class="layui-input-block">
          <input type="hidden" name="id" value=""/>
          <input type="text" name="typeName" lay-verify="required" class="layui-input"style="width:200px;"/>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">简介：</label>
        <div class="layui-input-block" style="width:200px;">
         <textarea name="typeDescription" lay-verify="required" autocomplete="off" placeholder="请输入简介"
                   class="layui-textarea"></textarea>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block" style="width:200px;">
          <button class="layui-btn layui-btn-sm layui-bg-red" lay-submit="" lay-filter="addBtn">提交</button>
        </div>
      </div>
    </form>
  </div>
  <!--新增结束-->
  <!-- 修改弹层区域默认隐藏。对应标号5的行内监听打开，被标号7的方法监听，需要将name值修改为和实体类属性一模一样 
	<div class="layui-form-item">
	  <label class="layui-form-label">类别名：</label>
	  <div class="layui-input-block">
	    <input type="hidden" name="typeId" value=""/>
		注意此处，需要根据id修改，设置一个隐藏输入框，作为传递id的容器，name值应该和实体类属性一模一样
	    <input type="text" name="typeName" lay-verify="required" class="layui-input"style="width:200px;"/>
	  </div>
	</div>
  -->
  <div class="layui-form-item" id="upye" style="display:none;">
    <form class="layui-form" onsubmit="return false;" lay-filter="up" id="up">
      <div class="layui-form-item">
        <label class="layui-form-label">类别名：</label>
        <div class="layui-input-block">
          <input type="hidden" name="typeId" value=""/>
          <input type="text" name="typeName" lay-verify="required" class="layui-input"style="width:200px;"/>
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">简介：</label>
        <div class="layui-input-block" style="width:200px;">
         <textarea name="typeDescription" lay-verify="required" autocomplete="off" placeholder="请输入简介"
                   class="layui-textarea"></textarea>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block" style="width:200px;">
          <button class="layui-btn layui-btn-sm layui-bg-red" lay-submit="" lay-filter="update">提交</button>
        </div>
      </div>
    </form>
  </div>
</div>
<script type="text/javascript" src="../lib/layui-v2.6.3/layui.js" ></script>
<script src="/static/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
  layui.use(['table','layer','form'],function(){
	//组件载入
    var table = layui.table;
    var layer = layui.layer;
    var $ = layui.$;
    var form = layui.form;

    // 1.表格渲染，只需要修改列标签
    table.render({
      elem: '#tableDemo',//指定原始表格元素选择器（推荐id选择器）
      even: true,
      page: true,
      method:'post',
      width: 1250,
      toolbar: '#topTool',
      url:'请求地址',
      cols:[[
		  /**
		   * fixed:'实体类属性',
		   * title:'中文名',
		   * width:宽度，使用数字，
		   * align:'对齐方式',
		   * fixed:'固定位置'
		   * tool:'容器ID'
		   * type:'元素类型'
		   */
		
        {type: 'checkbox', fixed: 'left'},
        {fixed:'left',type:'numbers', title:'编号'},
        {field:'typeName', title:'类别名称',align:'center'},
		//联查数据展示
		{templet : '<span>{{d.房间.床位}}</span>', title:'类别',align:'center'},
        {field:'typeDescription', title:'简介',align:'center'},
        {fixed: 'right', title:'操作', width:100, align:'center', toolbar: '#barDemo'}
      ]],
      id:"retable",//表格重载ID
    });
	
    //2.重载函数
    active = {
      reload : function(){
        table.reload('retable',{
          where:{
            "typeName" : $("#typeName").val(), //键(实体类属性名) : 值（顶部工具栏，输入框的值） 
          }
          ,page: {
            curr: $(".layui-laypage-em").next().html() //重新从第当前页开始
          }
        });
      }
    }

    //3.多条件查询
    $("#search").click(function(){
      active.reload();//重新加载表格
    });
	
	
    // 4.头工具栏事件
    table.on('toolbar(table)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id)
              ,data = checkStatus.data; //获取选中的数据
      switch(obj.event){
        case 'add'://按钮的event为add
          layer.open({
            type: 1,
            title: '添加数据',
            area: ['450px', '300px'],
            content: $('#addPage')
            //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
          });
          break;
        case 'delAll':
          if(data.length === 0){
            layer.msg('请至少选择一行');
          } else if(data.length > 1){
            $list = $checkStatus.data;
            $ids = [];
            for (var i = 0; i < $list.length; i++) {
              $ids[i] = $list[i].typeId;
            }
            $strIds = ""
            for (var i = 0; i < $ids.length; i++) {
              $strIds += $ids[i]+",";
            }
            layer.confirm("确认删除所有选中行吗？", function(index){
              var delUrl ="/type/deleteInfo";//访问地址
              var strData = {
                "ids": $strIds
              }
              $.post(delUrl, strData, function(res){
                $r = res;
                if ($r.code == 0) {
                  active.reload();//重载表格
                  layer.msg($r.msg, {
                    icon: 6,
                    time: 1000 //2秒关闭（如果不配置，默认是3秒）
                  }, function(){
                  });
                } else {
                  layer.msg($r.msg, {
                    icon: 5,
                    time: 1000 //2秒关闭（如果不配置，默认是3秒）
                  }, function(){
                  });
                }
              }, "json");
            });
          }
          break;
      };
    });
	
	
    //5.行内工具栏事件
    table.on('tool(table)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      if( obj.event =="edit"){//点击事件为edit
        form.val('up',data);//数据回显，name属性名要和实体类的属性名完全一致
        layer.open({//打开弹出层
          type: 1,//弹层类别
          title:"你正在进行修改操作",//头部提示
          area: ['450px', '500px'],//弹层区域的大小
          content: $('#upye') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
        });
      }else if(obj.event =="delete"){
        layer.confirm("确认删除["+ data.typeName +"]吗？", function(index){
          var delUrl ="/type/deleteInfo";//请求地址
          var strData = {
            "ids": data.typeId
          }
          $.post(delUrl, strData, function(res){
            $r = res;
            if ($r.code == 0) {
              active.reload();
              layer.msg($r.msg, {
                icon: 6,
                time: 1000 //2秒关闭（如果不配置，默认是3秒）
              }, function(){
              });
            } else {
              layer.msg($r.msg, {
                icon: 5,
                time: 1000 //2秒关闭（如果不配置，默认是3秒）
              }, function(){
              });
            }
          }, "json");
        });
      };
    });


    //6.添加方法
    form.on("submit(addBtn)", function() {//监听submit按钮
      //添加请求
      $.post("/type/addNewType", $("#addNew").serialize(), function(res) {//传入表单的序列化值
        $r = res;
        if ($r.code == 0) {//判断回调函数的返回值
          active.reload();//数据表格重载
          layer.closeAll();//弹层和提示关闭
          $("#addNew")[0].reset();//form表单刷新状态
          layer.msg($r.msg, {//提示信息
            icon: 6,//提示图标
            time: 1000 //2秒关闭（如果不配置，默认是3秒）
          }, function(){
          });
        }else{
          layer.msg($r.msg, {icon : 5});
        }
      }, "json");
    });
	
	
    //7.修改方法
    form.on('submit(update)', function(data){
      //alert($("#up").serialize());
      $.post('/type/updateInfo',$("#up").serialize(),function(res){
        console.log(res);
        $r = res;
        //取出表单值用form表单的id
        if($r.code == 0){
          active.reload();
          layer.closeAll();
          layer.msg($r.msg, {
            icon: 6,
            time: 1000 //2秒关闭（如果不配置，默认是3秒）
          }, function(){
          });
        }else{
          layer.msg($r.msg, {icon : 5});
        }
      },'json')
    });



	//8.特殊组件
	/**
	 *  //渲染下拉框
		$.post("/type/getAllByKeyWords",{},function(res){
		  //遍历集合
			  $.each(res.data,function(index,item){
				//<option value="实际value是id一般为数字">名称，用户看到的</option>
				$(".option").append(new Option(item.typeName,item.typeId));
			  });
		  //渲染layui下拉单
		  layui.form.render();
		},"json");
		
		需要配合下拉框使用 name和实体类属性相关联，二级联动，待完善
		
		<div class="layui-form-item">
		  <label class="layui-form-label">类别：</label>
		  <div class="layui-input-block" style="width:200px;">
		    <select  name="typeId" lay-verify="required" class="option">
		      <option value=""></option>
		    </select>
		  </div>
		</div>
		
		
	 */
	
  });
</script>
</body>
</html>